// 导入表单验证插件
import wxValidate from 'wechat-validate'
Page({
  behaviors: [wxValidate],
  data: {
    currentDate: new Date().getTime(),
    houseLayerVisible: false,
    repairLayerVisible: false,
    dateLayerVisible: false,
    houseList: [],
    repairItem: [],
    attachment: [],
    houseId: '',
    houseInfo: '',
    repairItemId: '', // 维修项的id
    repairItemName: '',// 维修项的名称
    appointment: '', // 预约维修如期
    description: '',
    mobile: ''
  },
  rules: {
    houseId: [
      { required: true, message: '请选择报修房屋!' }
    ],
    repairItemId: [
      { required: true, message: '请选择维修的项目!' }
    ],
    mobile: [
      { required: true, message: '请填写手机号码!' },
      { pattern: /^1[3-8]\d{9}$/, message: '请填写正确的手机号码!' },
    ],
    appointment: [
      { required: true, message: '请选择预约日期!' }
    ],
    description: [
      { required: true, message: '请填写问题描述!' }
    ],
  },
  onLoad({ id }) {
    // console.log(id)
    this.getHouseList()
    this.getRepairList()
    if (id) {
      //数据回显
      this.getRepairInfo(id)
      wx.setNavigationBarTitle({
        title: '修改保修详情'
      })
    }
  },
  async getRepairInfo(id) {
    // console.log(id)
    const res = await wx.http.get('/repair/' + id)
    console.log(res)
    this.setData({ ...res })
  },
  // 获得房屋列表
  async getHouseList() {
    const res = await wx.http.get('/room')
    const houseList = res.map(item => ({
      name: item.point + item.building + item.room,
      id: item.id
    }))
    this.setData({
      houseList
    })
  },
  // 获取维修项目列表
  async getRepairList() {
    const res = await wx.http.get('/repairItem')
    // console.log(res);
    this.setData({ repairItem: res })
  },

  // 选择维修房屋
  selectHouse({ detail }) {
    // console.log(detail);
    this.setData({
      houseId: detail.id,
      houseInfo: detail.name
    })
  },
  // 选择维修项目
  selectRepair({ detail }) {
    console.log(detail);
    this.setData({
      repairItemId: detail.id,
      repairItemName: detail.name
    })
  },
  // 选择预约时间
  selectDateTime(e) {
    console.log(e);
    this.setData(
      {
        dateLayerVisible: false,
        appointment: wx.utils.dataFormat(e.detail)
      }
    )
  },
  //上传图片
  afterRead(event) {
    const { file } = event.detail;
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    wx.uploadFile({
      url: wx.http.baseURL + '/upload',
      filePath: file.url,
      name: 'file',
      header: {
        Authorization: 'Bearer ' + getApp().token
      },
      success: (res) => {
        // console.log(res)
        const res1 = JSON.parse(res.data)
        const { code, message, data } = res1
        if (code !== 10000) return wx.utils.toast(message)
        this.setData({
          attachment: [...this.data.attachment, { url: data.url }]
        })
      },
    });
  },
  //删除图片
  delImg(event) {
    this.setData({
      attachment: this.data.attachment.filter((item, index) => {
        return index !== event.detail.index
      })
    })
  },
  //表单提交
  async submitForm() {
    const isPass = this.validate()
    if (!isPass) return
    const { id, houseId, repairItemId, mobile, appointment, description, attachment } = this.data
    await wx.http.post('/repair', { id, houseId, repairItemId, mobile, appointment, description, attachment })
    wx.utils.toast('提交成功')
    setTimeout(() => {
      wx.reLaunch({
        url: '/repair_pkg/pages/list/index',
      })
    }, 300);
  },

  // 打开选择房屋
  openHouseLayer() {
    this.setData({ houseLayerVisible: true })
  },
  // 关闭选择房屋
  closeHouseLayer() {
    this.setData({ houseLayerVisible: false })
  },
  // 打开选择维修项
  openRepairLayer() {
    this.setData({ repairLayerVisible: true })
  },
  // 关闭选择维修项
  closeRepairLayer() {
    this.setData({
      repairLayerVisible: false,
    })
  },

  openDateLayer() {
    this.setData({ dateLayerVisible: true })
  },
  closeDateLayer() {
    this.setData({ dateLayerVisible: false })
  },
  // goList() {
  //   wx.reLaunch({
  //     url: '/repair_pkg/pages/list/index',
  //   })
  // },
})
